<!-- user表单弹窗 -->
<form id="user-form" lay-filter="user-form" class="layui-form model-form">
    <input name="id" type="hidden"/>
    <div class="layui-form-item">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-block">
            <input name="username" placeholder="请输入账号" type="text" class="layui-input" minlength="6" maxlength="20"
                   lay-verify="required" required/>
        </div>
    </div>
    <div id="pwd" class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input name="password" placeholder="请输入密码" type="text" class="layui-input" minlength="6" maxlength="20"
                   lay-verify="required" required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input name="nickName" placeholder="请输入用户名" type="text" class="layui-input" minlength="6" maxlength="20"
                   lay-verify="required" required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">真实姓名</label>
        <div class="layui-input-block">
            <input name="realName" placeholder="请输入真实姓名" type="text" class="layui-input" minlength="2" maxlength="20"
                   lay-verify="required" required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input name="phone" placeholder="请输入手机号" type="text" class="layui-input" lay-verify="required|phone"
                   required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男" checked/>
            <input type="radio" name="sex" value="女" title="女"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色</label>
        <div class="layui-input-block">
            <select name="roleIds" xm-select="roleId" lay-verify="required" xm-select-skin="normal">
            </select>
        </div>
    </div>
    <div class="layui-form-item model-form-footer">
        <button class="layui-btn layui-btn-primary close" ew-event="closeDialog" type="button">取消</button>
        <button class="layui-btn" lay-filter="user-form-submit" lay-submit>保存</button>
    </div>
</form>

<script>
    layui.use(['layer', 'crab', 'form', 'formSelects'], function () {
        var layer = layui.layer;
        var crab = layui.crab;
        var form = layui.form;
        var formSelects = layui.formSelects;
        var edit = false;

        form.render('radio');

        var roleUrl = '/sys/role/list';
        // 编辑的用户信息
        var user = crab.getFormData();
        if (user) {
            $('#pwd').remove();
            edit = true;
            // 编辑角色查询选中接口
            roleUrl += '_' + user.id;
        }

        // 获取所有角色
        crab.request(roleUrl, {}, function (data) {
            // 渲染多选下拉框
            var roleSelectData = new Array();
            for (var i = 0; i < data.length; i++) {
                roleSelectData.push({name: data[i].name, value: data[i].id});
            }
            formSelects.data('roleId', 'local', {arr: roleSelectData});

            // 回显用户数据
            $('#user-form').attr('method', edit ? 'PUT' : 'POST');
            if (edit) {
                user.password = '';
                form.val('user-form', user);
                var rds = new Array();
                for (var i = 0; i < data.length; i++) {
                    if (data[i].selected) {
                        rds.push(data[i].id);
                    }
                }
                formSelects.value('roleId', rds);
            }
        });

        // 表单提交事件
        form.on('submit(user-form-submit)', function (data) {
            var url = '/sys/user';
            if (!edit) {
                url += '/dto';
            }
            crab.request(url, data.field, function () {
                layer.msg(edit ? '修改成功' : '添加成功', {icon: 1});
                crab.finishPopupCenter();
            }, $('#user-form').attr('method'));
            return false;
        });
    });
</script>